var headerDatas = [
    {label: "定义ID", field: "defId"},
    {label: "Jordan Walke", field: "This is *another* comment"}
];

var UIPanel = React.createClass({
    render:function(){
        return (
            <div className="panel panel-default">
                <UIToolBar/>
                <UITable url={this.props.url} headerDatas={headerDatas}/>
                <UIPagination/>
            </div>

        );
    }
});

var UIToolBar = React.createClass({
    render:function(){
        return (
            <div className="row wrapper">
                <div className="col-sm-5 m-b-xs">

                    <button className="btn m-b-xs btn-sm btn-primary btn-addon"><i className="fa fa-plus"></i>增加</button>
                    <button className="btn m-b-xs btn-sm btn-info btn-addon"><i className="fa fa-trash-o"></i>删除</button>
                    <button className="btn m-b-xs btn-sm btn-success btn-addon"><i className="fa fa-minus pull-right"></i>修改</button>
                    <button className="btn m-b-xs btn-sm btn-warning btn-addon"><i className="fa fa-circle"></i>部署</button>
                    <button className="btn m-b-xs btn-sm btn-default btn-addon"><i className="fa fa-plus"></i>导出</button>
                </div>
                <div className="col-sm-4"></div>
                <div className="col-sm-3">
                    <div className="input-group">
                        <input type="text" className="input-sm form-control" placeholder="请输入关键字"/>
                        <span className="input-group-btn">
                            <button className="btn btn-sm btn-default" type="button">搜索</button>
                        </span>
                    </div>
                </div>
            </div>
        );
    }
});

var UITable = React.createClass({
    getInitialState:function(){
        return {
            datas:[]
        };
    },
    componentDidMount: function() {
        $.ajax({
            url: this.props.url,
            dataType: 'json',
            cache: false,
            success: function(datas) {
                this.setState({datas: datas});
            }.bind(this),
            error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    render:function(){
        var rows =  this.state.datas.map(function(data){
            return (<UITableRow rowData={data} key={data.defId}/>);
        });
        var headerRows =  this.props.headerDatas.map(function(data){
                return (<UITableHdColumn field={data.field} label={data.label} key={data.field}/>);
        });
        return (
                <div>
                <table className="table table-bordered" >
                    <thead><tr><th><input type="checkbox"/></th>{headerRows}</tr></thead>
                    <tbody>{rows}</tbody>
                </table>
            </div>
        );
    }
});


var UITableRow = React.createClass({

    render:function(){
        var columns=[];
        for(var d in this.props.rowData){
            columns.push(<UITableColumn showName={this.props.rowData[d]} key={d}/>);
        }
        return (
            <tr>
                <td><input type="checkbox"/></td>
                {columns}
            </tr>

        );
    }
});

var UITableColumn = React.createClass({
    render:function(){
        return (<td>{this.props.showName}</td>);
    }
});

var UIPagination = React.createClass({
    render:function(){
        return (
            <footer className="panel-footer">
                <div className="row">
                    <div className="col-sm-4 hidden-xs"></div>
                    <div className="col-sm-4 text-center">
                        <small className="text-muted inline m-t-sm m-b-sm">显示 20-30 总共 50 条</small>
                    </div>
                    <div className="col-sm-4 text-right text-center-xs">
                        <ul className="pagination pagination-sm m-t-none m-b-none">
                            <li><a href><i className="fa fa-chevron-left"></i></a></li>
                            <li><a href>1</a></li>
                            <li><a href>2</a></li>
                            <li><a href>3</a></li>
                            <li><a href>4</a></li>
                            <li><a href>5</a></li>
                            <li><a href><i className="fa fa-chevron-right"></i></a></li>
                        </ul>
                    </div>
                </div>
            </footer>
        );
    }
});

var UITableHdColumn = React.createClass({

    render:function(){
        return (
            <th>{this.props.label}</th>
        );

    }

});


ReactDOM.render(<UIPanel url="list"/>,document.getElementById("example"));
